<template>
  <div class="result-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>考试成绩</span>
        </div>
      </template>

      <!-- 成绩概览 -->
      <el-row :gutter="20" class="statistics-info">
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">考试次数</div>
            </template>
            <div class="statistics-value">{{ statistics.totalExams }}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">平均分</div>
            </template>
            <div class="statistics-value">{{ statistics.averageScore }}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover">
            <template #header>
              <div class="statistics-header">最高分</div>
            </template>
            <div class="statistics-value">{{ statistics.highestScore }}</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 成绩列表 -->
      <el-table :data="examResults" style="width: 100%">
        <el-table-column prop="name" label="考试名称" />
        <el-table-column prop="score" label="得分" width="100" />
        <el-table-column prop="submitTime" label="提交时间" width="180" />
        <el-table-column prop="rank" label="排名" width="100" />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleViewDetail(scope.row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 成绩详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="成绩详情"
      width="60%"
    >
      <div v-if="currentExamDetail">
        <div class="exam-info">
          <h3>{{ currentExamDetail.name }}</h3>
          <p>得分：{{ currentExamDetail.score }}</p>
          <p>提交时间：{{ currentExamDetail.submitTime }}</p>
          <p>排名：{{ currentExamDetail.rank }}/{{ currentExamDetail.totalStudents }}</p>
        </div>

        <div
          v-for="(question, index) in currentExamDetail.questions"
          :key="question.id"
          class="question-detail"
        >
          <div class="question-header">
            <span>第{{ index + 1 }}题（{{ question.score }}分）</span>
            <span :class="['score', question.gotScore === 0 ? 'wrong' : '']">
              得分：{{ question.gotScore }}
            </span>
          </div>
          <div class="question-content">
            <p><strong>题目：</strong>{{ question.title }}</p>
            <p><strong>你的答案：</strong>{{ question.studentAnswer }}</p>
            <p><strong>正确答案：</strong>{{ question.correctAnswer }}</p>
            <p v-if="question.explanation"><strong>解析：</strong>{{ question.explanation }}</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

// 统计数据
const statistics = reactive({
  totalExams: 5,
  averageScore: 85.5,
  highestScore: 95
})

// 考试结果列表
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

const examResults = ref([
  {
    id: 1,
    name: 'C语言期中考试',
    score: 90,
    submitTime: '2024-04-01 15:30:00',
    rank: 5
  },
  {
    id: 2,
    name: 'C语言章节测试-指针',
    score: 85,
    submitTime: '2024-04-05 11:20:00',
    rank: 8
  }
])

// 详情对话框
const detailDialogVisible = ref(false)
const currentExamDetail = ref(null)

const handleViewDetail = (exam) => {
  currentExamDetail.value = {
    ...exam,
    totalStudents: 120,
    questions: [
      {
        id: 1,
        title: '以下哪个不是C语言的基本数据类型？',
        score: 2,
        gotScore: 2,
        studentAnswer: 'string',
        correctAnswer: 'string',
        explanation: 'C语言的基本数据类型包括int、float、char等，string是C++中的类型。'
      },
      {
        id: 2,
        title: '关于指针的说法，以下正确的是：',
        score: 4,
        gotScore: 4,
        studentAnswer: '指针变量存储的是内存地址',
        correctAnswer: '指针变量存储的是内存地址',
        explanation: '指针是一种特殊的变量，用于存储内存地址。'
      }
    ]
  }
  detailDialogVisible.value = true
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.result-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistics-info {
  margin-bottom: 20px;
}

.statistics-header {
  text-align: center;
  font-size: 16px;
}

.statistics-value {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.exam-info {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.exam-info h3 {
  margin: 0 0 10px 0;
}

.exam-info p {
  margin: 5px 0;
}

.question-detail {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.question-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.score {
  color: #67c23a;
}

.score.wrong {
  color: #f56c6c;
}

.question-content {
  font-size: 14px;
}

.question-content p {
  margin: 8px 0;
}
</style> 